<template>
    <li :key="item.id" @click="playMusic">
      <slot></slot>
      <div class="left">
          <div class="name">{{item.name}}</div>
          <p>
            <span :class="{active:item.song.privilege.maxbr>320000}"></span>
            {{item.song.artists[0].name}}-{{item.name}}</p>
      </div>
      <div class="right">
        <span></span>
        <!-- <Loading :class="{active:isPlay}"></Loading> -->
      </div>
     </li> 

</template>
<script>
// import Loading from './Loading.vue';
export default {
  // components: { Loading },
    props:{
      item:Object,
      num:{
        type:Number,
        default:0
      }
    },
    data(){
      return {
        isPlay:false
      }
    },
    methods:{
        playMusic(){
          //把音乐ID传递给Vue实例里面playingMusic属性.
          this.$root.playingMusic.musicID = this.item.id;
          this.$root.playingMusic.isShow = true;
        }
    },
    filters:{
      formatNum(val){
        return val<10?"0"+val:val;
      }
    }
}
</script>
<style lang="less" scoped>
li {
    display: flex;
    margin-top: 10px;
    padding-left: 15px;
    .left {
      text-align: left;
      flex: 1;
      border-bottom: 1px solid #ddd;
      .name{
          color: #000;
          font-size: 17px;
      }
      p{
          color: #888;
          font-size: 12px;
          span.active{
            display: inline-block;
            padding: 0 2px;
            background: url(../assets/index_icon_2x.png) no-repeat 0 0;
            background-size: 166px 97px;
            width: 12px;
            height: 8px;
          }
      }
    }
    .right {
      display: flex;
      align-items: center;
      padding: 0 10px;
      border-bottom: 1px solid #ddd;
        span {
          display: inline-block;
          width: 22px;
          height: 22px;
          background: url(../assets/index_icon_2x.png) no-repeat -24px 0;
          background-size: 166px 97px;
        }
      
    }
  }
</style>